import React, { PureComponent } from 'react'
// import PropTypes from 'prop-types'
import {
  Button,
  Typography,
  Tooltip,
  Spin,
  Alert,
  Layout,
  Divider,
  Icon,
  Input,
  Row,
  Col,
  Tag,
  List,
} from 'antd'
import { Trans, withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro'
import actionstyle from './Filter.less'

const { Sider } = Layout
const { Paragraph, Title } = Typography

@withI18n()
class Filter extends PureComponent {
  render() {
    const { isMobile, i18n, index, onFilterChange } = this.props
    const msgTypes = [i18n.t`Unread`, i18n.t`Already Read`]

    const content = description => (
      <Alert
        message={
          isMobile ? (
            <Row gutter={24}>
              <Col span={14}>
                <Title
                  level={4}
                  style={{ display: 'inline-block', marginRight: '10px' }}
                >
                  <Trans>Message Center</Trans>:
                </Title>
              </Col>
              <Col span={10}>{''}</Col>
            </Row>
          ) : (
            <span style={{ display: 'block' }}>
              <Title
                level={4}
                style={{ display: 'inline-block', marginRight: '10px' }}
              >
                <Trans>Message Center</Trans>:
              </Title>
              {''}
            </span>
          )
        }
        description={description}
        type="info"
        style={{
          background: '#fff',
          borderColor: isMobile ? 'rgb(244,244,244)' : '#fff',
          margin: '0px',
          marginBottom: '10px',
          marginTop: '0px',
          paddingTop: isMobile ? '12px' : '0px',
        }}
      />
    )

    const filteritem = (item, tindex) => {
      let choosed = index == tindex
      let choosedstyle = choosed
        ? {
            fontSize: '15px',
            cursor: 'not-allowed',
            color: '#8fc9fb',
            margin: '0px',
            marginTop: '0px',
            padding: '0px',
          }
        : {
            fontSize: '15px',
            cursor: 'pointer',
            color: 'rgb(128,128,128)',
            margin: '0px',
            marginTop: '0px',
            padding: '0px',
          }
      return (
        <List.Item
          className={actionstyle.customaction}
          style={{ margin: '0px', padding: '0px', paddingBottom: '5px' }}
        >
          <Ellipsis
            onClick={e => {
              if (!choosed) onFilterChange(tindex)
            }}
            lines={1}
            style={{ ...choosedstyle, width: '100%' }}
          >
            {item}
          </Ellipsis>
        </List.Item>
      )
    }
    const mobilefilteritem = (item, tindex) => {
      let choosed = index == tindex
      return (
        <Tag
          {...(choosed ? { color: 'blue' } : {})}
          style={{ marginBottom: '5px', marginRight: '5px' }}
          onClick={e => {
            if (!choosed) onFilterChange(tindex)
          }}
        >
          <Icon type="folder" style={{ marginRight: '5px' }} />
          {item}
        </Tag>
      )
    }

    const mobiledescription = () => {
      return msgTypes.map((item, index) => {
        return mobilefilteritem(item, index)
      })
    }

    const description = () => (
      <div>
        <Divider style={{ marginTop: '5px', marginBottom: '10px' }} />
        <div style={{ overflow: 'scroll', maxHeight: '500px' }}>
          <List
            style={{ overflow: 'scroll', maxHeight: '500px' }}
            split={false}
            dataSource={msgTypes}
            renderItem={(item, index) => filteritem(item, index)}
            style={{}}
            size="small"
          />
        </div>
      </div>
    )

    return isMobile ? (
      content(mobiledescription())
    ) : (
      <Sider width={150} style={{ background: '#fff' }}>
        {content(description())}
      </Sider>
    )
  }
}
export default Filter
